<template>
  <div class="max-w-7xl mx-auto px-4 py-8">
    <div class="grid gap-6">
      <div v-for="article in articles" :key="article.id" 
           class="bg-white shadow-lg rounded-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
        <div class="p-6">
          <router-link :to="'/article/' + article.id" class="block">
            <h2 class="text-2xl font-bold text-gray-900 mb-2 hover:text-blue-600 transition-colors duration-200">
              {{ article.title }}
            </h2>
          </router-link>
          <div class="flex items-center text-gray-600 text-sm mb-4">
            <span class="mr-4">作者：{{ article.authorName }}</span>
            <span>發布時間：{{ formatDate(article.createTime) }}</span>
          </div>
          <p class="text-gray-600 line-clamp-3">{{ article.content }}</p>
        </div>
      </div>
    </div>

    <!-- 加載狀態 -->
    <div v-if="loading" class="text-center py-8">
      <p class="text-gray-600">加載中...</p>
    </div>

    <!-- 無文章時顯示 -->
    <div v-if="!loading && articles.length === 0" class="text-center py-8">
      <p class="text-gray-600">暫無文章</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const articles = ref([])
const loading = ref(true)

const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString('zh-TW', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const fetchArticles = async () => {
  try {
    const response = await axios.get('/content/articles?userId=1')
    articles.value = response.data
  } catch (error) {
    console.error('獲取文章列表失敗:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchArticles()
})
</script>

<style scoped>
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>